import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Button } from 'element-react';
import { Form } from 'element-react';
import { Input } from 'element-react';
import { Message } from 'element-react';
import axios from 'axios';
import 'element-theme-default';
//import { Redirect } from 'react-router-dom'

class Login extends Component {
	constructor(props) {
  super(props);

  this.state = {
    form: {
      password: '',
      name: ''
    },
    rules: {
    	name: [
        { required: true, message: '请输入密码', trigger: 'blur' },
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { validator: (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入密码'));
          } else {
            if (this.state.form.checkPass !== '') {
              //this.refs.form.validateField('checkPass');
            }
            callback();
          }
        } }
      ]
    }
  };
}

handleSubmit(e) {
  e.preventDefault();

  this.refs.form.validate((valid) => {
    if (valid) {
      console.log(this.state.form);
	      axios({
			    method: 'post',
			    url:'coalmine/user/login',
			    data:this.state.form
			  }).then((res)=>{
			  	 console.log(res)
			     if(res.data.status===0){
			     	  //this.state.islogin = 1 //赋值不成功，不是全局变量？？？
			     	  console.log(this.state)
			     }
			  });
    } else {
      Message({
		    showClose: true,
		    message: '用户名或密码错误!',
		    type: 'error'
		  });
      return false;
    }
  });
}
onChange(key, value) {
  this.setState({
    form: Object.assign({}, this.state.form, { [key]: value })
  });
}
handleKeydown(e){
	//console.log(e.keyCode)
	if(e.keyCode === 13){
		this.handleSubmit(e)
	}
}
  render() {
    return (
    	<div>
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
	      <Form ref="form" model={this.state.form} rules={this.state.rules} labelWidth="100" className="demo-ruleForm">
	          <Form.Item label="用户名" prop="name">
			        <Input  model={this.state.form.name} onChange={this.onChange.bind(this, 'name')} />
			      </Form.Item>
			      <Form.Item label="密码" prop="password">
			        <Input type="password" value={this.state.form.password} onChange={this.onChange.bind(this, 'password')} onKeyDown={(e)=>{this.handleKeydown(e);}}/>
			      </Form.Item>
			       <Form.Item>
			        <Button type="primary" onClick={this.handleSubmit.bind(this)}>登录</Button>
			      </Form.Item>
			  </Form>
			 </div>
    );
  }
}

export default Login;
